<%--
  Created by IntelliJ IDEA.
  User: K
  Date: 2022/8/18
  Time: 13:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
  <title>添加员工</title>
  <!-- 通过cdn的方式引入，需要连网 -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="${pageContext.request.contextPath}/static/js/vue.min.js" type="text/javascript"></script>
  <!-- 解决浏览器生产提示信息 -->
  <script> Vue.config.productionTip = false </script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入vue.js -->
  <script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
  <el-form ref="form" :model="employee" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="employee.employeName"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="employee.employePassword" type="password"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="employee.employeAge"></el-input>
    </el-form-item>
    <el-form-item label="电话">
      <el-input v-model="employee.employePhone"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="employee.employeGender" placeholder="请选择性别">
        <el-option label="其他" value="其他"></el-option>
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="权限">
      <el-select v-model="employee.employePower" placeholder="请选择职位">
        <el-option label="经理" value="经理"></el-option>
        <el-option label="前台" value="前台"></el-option>
        <el-option label="其他" value="其他"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addEmployee">新增用户</el-button>
    </el-form-item>
  </el-form>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      employee: {
        employeName: "",
        employePassword: "",
        employeAge: "",
        employeGender: "",
        employePhone: "",
        employePower: "",
      }
    },
    methods: {
      addEmployee() {
        console.log(this.employee)
        var _this = this;
        $.ajax({
          url: '${pageContext.request.contextPath}/employee/addEmployee',
          dataType: 'json',
          type: 'post',
          data: {
            employeName: this.employee.employeName,
            employePassword: this.employee.employePassword,
            employeAge: this.employee.employeAge,
            employeGender: this.employee.employeGender,
            employePhone: this.employee.employePhone,
            employePower: this.employee.employePower,
          },
          success: function (rs) {
            if (rs.code == 200) {
              _this.$alert(rs.msg + ",正在更新数据...")
              setTimeout(function () {
                location.href = '${pageContext.request.contextPath}/employeeList';
              })
            } else {
              _this.$alert(rs.msg)
            }
          }
        })
      }
    },
    mounted() {
    }
  })
</script>
</body>
</html>

